<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { onUnmounted, ref } from 'vue'
import { useBookshelfStore } from '@/store/bookshelf'
import { useNovelDetailStore } from '@/store/novel-detail'
import {
  canJumpToApp,
  canJumpToExternal,
  getPlatformConfig,
  jumpToExternalNovel,
  showJumpConfirm,
  testUrlSchemeGeneration,
} from '@/utils/platformJump'
import { safeAreaInsets } from '@/utils/systemInfo'

defineOptions({
  name: 'NovelDetail',
})

definePage({
  type: 'detail',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '小说详情',
    enablePullDownRefresh: false,
  },
})

// 禁用下拉刷新，改为手动刷新或通过其他方式触发

// ==================== 状态管理 ====================
const novelDetailStore = useNovelDetailStore()
const bookshelfStore = useBookshelfStore()

// 页面参数
const novelId = ref<number>(0)

// 页面本地状态
const showChapterList = ref(false)
const showCommentModal = ref(false)
const commentText = ref('')
const selectedRating = ref(5)
const showBookshelfSelector = ref(false) // 书架选择器显示状态
const selectedBookshelfId = ref<number | null>(null) // 选中的书架ID
const showCreateBookshelfModal = ref(false) // 创建书架弹窗显示状态
const newBookshelfName = ref('') // 新书架名称
const newBookshelfDescription = ref('') // 新书架描述
const isDevelopment = import.meta.env.DEV // 是否为开发环境

// 从 store 中解构响应式数据
const {
  // 小说数据
  novel,
  chapters,
  comments,
  recommendations,
  isFavorited,
  readingProgress,
  currentChapterId,
  activeTab,

  // 加载状态
  novelLoading,
  chaptersLoading,
  commentsLoading,
  recommendationsLoading,
  favoriteLoading,
  refreshing,

  // 错误状态
  novelError,
  chaptersError,
  commentsError,
  recommendationsError,

  // 分页状态
  commentsHasMore,

  // 计算属性
  formattedWordCount,
  formattedViewCount,
  progressPercentage,
  statusText,
  ratingScore,
} = storeToRefs(novelDetailStore)

// 从 store 中解构方法
const {
  loadNovelData,
  toggleFavorite,
  updateReadingProgress,
  submitComment,
  toggleCommentLike,
  refresh,
  reset,
} = novelDetailStore

// 从书架store中解构数据
const {
  bookshelves,
  bookshelfOptions,
  defaultBookshelf,
} = storeToRefs(bookshelfStore)

const {
  fetchBookshelves,
  selectBookshelf,
  createBookshelfAction,
} = bookshelfStore

// ==================== 生命周期 ====================
onLoad((options: any) => {
  console.log('NovelDetail onLoad called with options:', options)

  // 重置状态
  reset()

  // 接收页面参数并验证
  const id = Number(options.id)
  if (!id || id <= 0) {
    console.error('Invalid novel ID:', options.id)
    novelError.value = '无效的小说ID'
    return
  }

  novelId.value = id
  console.log('Set novelId to:', novelId.value)

  // 加载页面数据
  loadPageData()
})

// 加载页面数据
async function loadPageData() {
  if (!novelId.value || novelId.value <= 0) {
    console.error('Invalid novelId for loading:', novelId.value)
    novelError.value = '无效的小说ID'
    return
  }

  try {
    console.log('开始加载页面数据，novelId:', novelId.value)
    novelLoading.value = true
    novelError.value = null

    // 并行加载小说数据和书架数据
    await Promise.all([
      loadNovelData(novelId.value),
      fetchBookshelves({}, true), // 加载书架数据
    ])
    console.log('页面数据加载成功')
  }
  catch (error: any) {
    console.error('页面数据加载失败:', error)
    novelError.value = error.message || '加载失败，请重试'

    // 显示用户友好的错误提示
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none',
      duration: 2000,
    })
  }
  finally {
    novelLoading.value = false
  }
}

onUnmounted(() => {
  // 清理状态（注释掉避免页面切换时重置状态导致的问题）
  // reset()
  console.log('NovelDetail unmounted, but keeping state for better UX')
})

// ==================== 事件处理 ====================

// 返回上一页
function handleBack() {
  uni.navigateBack()
}

// 分享小说
function handleShare() {
  if (!novel.value)
    return

  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: `pages/novel-detail/index?id=${novelId.value}`,
    title: novel.value.title,
    summary: novel.value.description || '',
    imageUrl: novel.value.coverImage || '',
  })
}

// 加入书架
async function handleAddToLibrary() {
  // 如果已收藏，则执行取消收藏
  if (isFavorited.value) {
    try {
      await toggleFavorite(novelId.value, selectedBookshelfId.value)
      uni.showToast({
        title: '已从书架移除',
        icon: 'success',
      })
    }
    catch (error) {
      console.error('取消收藏失败:', error)
      uni.showToast({
        title: '移除失败，请重试',
        icon: 'none',
      })
    }
    return
  }

  // 总是显示书架选择器让用户选择要加入哪个书架
  showBookshelfSelector.value = true
  selectedBookshelfId.value = defaultBookshelf.value?.id || null
}

// 确认加入书架
async function confirmAddToBookshelf() {
  if (!selectedBookshelfId.value) {
    uni.showToast({
      title: '请选择书架',
      icon: 'none',
    })
    return
  }

  try {
    await toggleFavorite(novelId.value, selectedBookshelfId.value)

    showBookshelfSelector.value = false
    selectedBookshelfId.value = null

    // 找到选择的书架名称用于提示
    const selectedBookshelf = bookshelves.value.find((b: any) => b.id === selectedBookshelfId.value)
    uni.showToast({
      title: `已加入"${selectedBookshelf?.name || '书架'}"`,
      icon: 'success',
    })
  }
  catch (error) {
    console.error('加入书架失败:', error)
    uni.showToast({
      title: '加入书架失败，请重试',
      icon: 'none',
    })
  }
}

// 取消选择书架
function cancelBookshelfSelection() {
  showBookshelfSelector.value = false
  selectedBookshelfId.value = null
}

// 选择书架
function selectBookshelfForAdd(bookshelfId: number) {
  selectedBookshelfId.value = bookshelfId
}

// 创建新书架
async function createNewBookshelf() {
  showCreateBookshelfModal.value = true
}

// 确认创建书架
async function confirmCreateBookshelf() {
  if (!newBookshelfName.value.trim()) {
    uni.showToast({
      title: '请输入书架名称',
      icon: 'none',
    })
    return
  }

  // 调试信息
  const requestData = {
    name: newBookshelfName.value.trim(),
    description: newBookshelfDescription.value.trim(),
    sortOrder: bookshelves.value.length,
  }
  console.log('=== 创建书架请求数据 ===')
  console.log('请求参数:', requestData)
  console.log('当前书架数量:', bookshelves.value.length)

  try {
    const newBookshelf = await createBookshelfAction(requestData)

    // 选择新创建的书架（只有成功创建才有ID）
    if (newBookshelf && newBookshelf.id) {
      selectedBookshelfId.value = newBookshelf.id
    }

    // 关闭创建书架弹窗
    showCreateBookshelfModal.value = false
    newBookshelfName.value = ''
    newBookshelfDescription.value = ''

    uni.showToast({
      title: '书架创建成功',
      icon: 'success',
    })
  }
  catch (error: any) {
    console.error('创建书架失败:', error)

    // 更详细的错误处理
    let errorMessage = '创建书架失败，请重试'

    if (error.statusCode === 500) {
      errorMessage = '服务器内部错误，可能是数据库问题，请稍后重试'
    }
    else if (error.statusCode === 401) {
      errorMessage = '登录已过期，请重新登录'
    }
    else if (error.message) {
      errorMessage = error.message
    }

    // 如果store没有显示错误提示，我们在这里显示
    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 3000,
    })
  }
}

// 取消创建书架
function cancelCreateBookshelf() {
  showCreateBookshelfModal.value = false
  newBookshelfName.value = ''
  newBookshelfDescription.value = ''
}

// 开始阅读
async function handleStartReading() {
  try {
    // 如果小说支持外部跳转，优先跳转到外部平台
    if (novel.value && canJumpToExternal(novel.value)) {
      const config = getPlatformConfig(novel.value.platform!)

      // 显示跳转确认（可选）
      const confirmed = await showJumpConfirm(config!)

      if (!confirmed) {
        return
      }

      // 尝试外部跳转
      await jumpToExternalNovel(novel.value)

      uni.hideLoading()
      uni.showToast({
        title: '跳转成功',
        icon: 'success',
        duration: 1500,
      })
    }
    else {
      // 回退到内置阅读器
      await handleInternalReading()
    }
  }
  catch (error) {
    uni.hideLoading()
    console.error('阅读跳转失败:', error)

    // 显示错误信息并提供备选方案
    uni.showModal({
      title: '跳转失败',
      content: `${error instanceof Error ? error.message : '未知错误'}\n\n是否在应用内阅读？`,
      confirmText: '应用内阅读',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          handleInternalReading()
        }
      },
    })
  }
}

// 内置阅读器处理函数
async function handleInternalReading() {
  // 使用当前章节ID或第一章
  const targetChapterId = currentChapterId.value || (chapters.value[0]?.id)

  if (!targetChapterId) {
    uni.showToast({
      title: '暂无章节可读',
      icon: 'none',
    })
    return
  }

  // 更新阅读进度
  await updateReadingProgress(novelId.value, targetChapterId)

  // 跳转到内置阅读器
  uni.navigateTo({
    url: `/pages/reader/index?novelId=${novelId.value}&chapterId=${targetChapterId}`,
  })
}

// 选择章节
async function handleChapterSelect(chapterId: number) {
  showChapterList.value = false

  // 更新阅读进度
  await updateReadingProgress(novelId.value, chapterId)

  uni.navigateTo({
    url: `/pages/reader/index?novelId=${novelId.value}&chapterId=${chapterId}`,
  })
}

// 切换标签页
function handleTabChange(tab: string) {
  activeTab.value = tab
}

// 提交评论
async function handleCommentSubmit() {
  if (!commentText.value.trim()) {
    uni.showToast({
      title: '请输入评论内容',
      icon: 'none',
    })
    return
  }

  try {
    await submitComment(novelId.value, commentText.value, selectedRating.value)

    // 重置表单
    commentText.value = ''
    selectedRating.value = 5
    showCommentModal.value = false

    uni.showToast({
      title: '评论发表成功',
      icon: 'success',
    })
  }
  catch (error) {
    console.error('发表评论失败:', error)
  }
}

// 点赞评论
async function handleCommentLike(commentId: number) {
  try {
    await toggleCommentLike(commentId)
  }
  catch (error) {
    console.error('评论点赞失败:', error)
  }
}

// 点击推荐小说
function handleRecommendationClick(recNovel: any) {
  uni.navigateTo({
    url: `/pages/novel-detail/index?id=${recNovel.id}`,
  })
}

// 下拉刷新
async function handleRefresh() {
  if (!novelId.value || novelId.value <= 0) {
    console.error('Invalid novelId for refresh:', novelId.value)
    uni.showToast({
      title: '无效的小说ID',
      icon: 'none',
    })
    return
  }

  try {
    console.log('开始刷新页面数据，novelId:', novelId.value)
    await refresh(novelId.value)
    console.log('页面数据刷新成功')
  }
  catch (error: any) {
    console.error('刷新失败:', error)
    uni.showToast({
      title: error.message || '刷新失败，请重试',
      icon: 'none',
    })
  }
}

// 格式化数量显示
function formatCount(count: number) {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}

// 格式化时间显示
function formatTime(timeStr: string) {
  // 这里可以添加更复杂的时间格式化逻辑
  return timeStr
}

// 获取阅读按钮文本
function getReadingButtonText() {
  if (!novel.value) {
    return '开始阅读'
  }

  // 如果支持外部跳转，显示跳转提示
  // if (canJumpToExternal(novel.value)) {
  //   const config = getPlatformConfig(novel.value.platform!)

  //   // 检查是否支持App跳转
  //   if (canJumpToApp(novel.value)) {
  //     return `打开${config?.name || '小说'}App`
  //   }

  //   return `前往${config?.name || '原站'}阅读`
  // }

  // 否则显示普通阅读文本
  return currentChapterId.value ? '继续阅读' : '开始阅读'
}

// 测试URL Scheme生成（开发环境专用）
function handleTestUrlScheme() {
  if (novel.value) {
    testUrlSchemeGeneration(novel.value)
  }
}
</script>

<template>
  <view class="novel-detail-page" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
    <view :style="{ '--status-bar-height': `${safeAreaInsets?.top || 44}px` }" class="page-content">
      <!-- 顶部导航栏 -->
      <view class="detail-header header-transparent">
        <view class="header-content">
          <view class="header-left">
            <view class="header-action" @click="handleBack">
              <i class="fas fa-chevron-left header-icon" />
            </view>
          </view>
          <view class="header-right">
            <view class="header-action" @click="handleShare">
              <i class="fas fa-share header-icon" />
            </view>
          </view>
        </view>
      </view>

      <!-- 小说基本信息 -->
      <section v-if="novel" class="novel-hero">
        <view class="hero-bg" :style="{ backgroundImage: novel?.coverImage ? `url(${novel.coverImage})` : 'none' }" />
        <view class="hero-content">
          <image :src="novel?.coverImage || '/static/images/default-cover.jpg'" class="novel-cover-main" mode="aspectFill" />
          <view class="novel-info-main">
            <view class="novel-info-content">
              <text class="novel-title-main">{{ novel?.title || '加载中...' }}</text>
              <text class="novel-author-main">作者：{{ novel?.author || '未知' }}</text>
              <view class="novel-meta-main">
                <text class="meta-tag">{{ novel?.masterCategory?.name || '未分类' }}</text>
                <text class="meta-tag">{{ statusText }}</text>
                <text class="meta-tag">{{ formattedWordCount }}</text>
              </view>
            </view>
            <view class="novel-stats-main">
              <view class="stat-item-main">
                <text class="stat-value">{{ ratingScore }}</text>
                <text class="stat-label">评分</text>
              </view>
              <view class="stat-item-main">
                <text class="stat-value">{{ formattedViewCount }}</text>
                <text class="stat-label">阅读</text>
              </view>
              <view class="stat-item-main">
                <text class="stat-value">{{ progressPercentage }}%</text>
                <text class="stat-label">进度</text>
              </view>
            </view>
          </view>
        </view>
      </section>

      <!-- 加载状态 -->
      <view v-else-if="novelLoading" class="loading-container">
        <view class="loading-spinner" />
        <text class="loading-text">正在加载小说详情...</text>
        <text class="loading-subtitle">请稍候</text>
      </view>

      <!-- 错误状态 -->
      <view v-else-if="novelError" class="error-container">
        <text class="error-text">{{ novelError }}</text>
        <view class="retry-btn" @click="handleRefresh">
          <text>重试</text>
        </view>
      </view>

      <!-- 评分和进度 -->
      <section v-if="novel || novelLoading" class="rating-progress">
        <view class="rating-header">
          <view class="rating-info">
            <text class="rating-score">{{ ratingScore }}</text>
            <view class="rating-stars">
              <text
                v-for="i in 5"
                :key="i"
                class="star-icon" :class="[
                  i <= Math.floor(novel?.ratingScore || 0)
                    ? 'text-yellow-400'
                    : 'text-gray-400',
                ]"
              >
                ★
              </text>
            </view>
            <text class="rating-count">{{ formatCount(novel?.ratingCount || 0) }}人评分</text>
          </view>
          <view class="progress-info">
            <text class="progress-label">阅读进度 {{ progressPercentage }}%</text>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: `${progressPercentage}%` }" />
            </view>
          </view>
        </view>
      </section>

      <!-- 操作按钮 -->
      <section v-if="novel || novelLoading" class="action-buttons">
        <view class="action-btn btn-primary" @click="handleStartReading">
          <text class="i-carbon-document action-icon" />
          <text>{{ getReadingButtonText() }}</text>
        </view>
        <view class="action-btn btn-secondary" @click="handleAddToLibrary">
          <text class="action-icon" :class="[isFavorited ? 'i-carbon-bookmark' : 'i-carbon-bookmark']" />
          <text>{{ isFavorited ? '已在书架' : '加入书架' }}</text>
        </view>
        <view class="action-btn btn-secondary" @click="showChapterList = true">
          <text class="i-carbon-list action-icon" />
          <text>目录</text>
        </view>
  
      </section>

      <!-- 标签页 -->
      <section class="tabs-container">
        <view class="tabs-header">
          <view
            v-for="tab in [
              { key: 'intro', name: '简介' },
              { key: 'chapters', name: '章节' },
              { key: 'comments', name: '评论' },
              { key: 'recommendations', name: '推荐' },
            ]"
            :key="tab.key"
            class="tab-item" :class="[{ active: activeTab === tab.key }]"
            @click="handleTabChange(tab.key)"
          >
            <text>{{ tab.name }}</text>
            <view v-if="activeTab === tab.key" class="tab-indicator" />
          </view>
        </view>

        <view class="tabs-content">
          <!-- 简介内容 -->
          <view v-if="activeTab === 'intro'" class="intro-content">
            <text class="intro-text">{{ novel?.description || '暂无简介' }}</text>
            <view v-if="novel?.tags?.length" class="intro-tags">
              <text v-for="tag in novel.tags" :key="tag" class="tag">{{ tag }}</text>
            </view>
          </view>

          <!-- 章节内容 -->
          <view v-if="activeTab === 'chapters'" class="chapters-content">
            <view class="chapters-header">
              <text class="chapters-title">目录</text>
              <text class="chapters-more" @click="showChapterList = true">查看全部</text>
            </view>
            <view v-if="chapters.length" class="chapters-list">
              <view
                v-for="chapter in chapters.slice(0, 6)"
                :key="chapter.id"
                class="chapter-item"
                @click="handleChapterSelect(chapter.id)"
              >
                <view class="chapter-info">
                  <view class="chapter-status" :class="[{ unread: currentChapterId && chapter.id > currentChapterId }]" />
                  <text class="chapter-title">{{ chapter.title }}</text>
                </view>
                <view class="chapter-meta">
                  <text v-if="chapter.isVip" class="vip-badge">VIP</text>
                  <text class="word-count">{{ chapter.wordCount }}字</text>
                </view>
              </view>
            </view>
            <view v-else-if="chaptersLoading" class="loading">
              <text>加载章节中...</text>
            </view>
            <view v-else class="empty-state">
              <text>暂无章节</text>
            </view>
          </view>

          <!-- 评论内容 -->
          <view v-if="activeTab === 'comments'" class="comments-content">
            <view class="comments-header">
              <text class="comments-title">精选评论</text>
              <view class="write-comment" @click="showCommentModal = true">
                <text>写评论</text>
              </view>
            </view>
            <view v-if="comments.length" class="comments-list">
              <view v-for="comment in comments" :key="comment.id" class="comment-item">
                <view class="comment-header">
                  <view class="comment-user">
                    <image :src="comment.user?.avatar || '/static/images/default-avatar.png'" class="user-avatar" mode="aspectFill" />
                    <view class="user-info">
                      <text class="user-name">{{ comment.user?.nickname || comment.user?.username || '匿名用户' }}</text>
                      <text class="user-level">普通用户</text>
                    </view>
                  </view>
                </view>
                <text class="comment-content">{{ comment.content }}</text>
                <view class="comment-actions">
                  <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
                  <view
                    class="comment-like"
                    :class="{ liked: comment.isLiked }"
                    @click="handleCommentLike(comment.id)"
                  >
                    <i class="fas" :class="[comment.isLiked ? 'fa-heart' : 'fa-heart']" style="font-size: 24rpx;" />
                    <text style="font-size: 24rpx;">{{ comment.likeCount }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view v-else-if="commentsLoading" class="loading">
              <text>加载评论中...</text>
            </view>
            <view v-else class="empty-state">
              <text>暂无评论，来发表第一条评论吧！</text>
            </view>
          </view>

          <!-- 推荐内容 -->
          <view v-if="activeTab === 'recommendations'" class="recommendations-content">
            <view v-if="recommendations.length" class="recommendations-grid">
              <view
                v-for="rec in recommendations"
                :key="rec.id"
                class="rec-item"
                @click="handleRecommendationClick(rec)"
              >
                <image :src="rec.coverImage || '/static/images/default-cover.jpg'" class="rec-cover" mode="aspectFill" />
                <text class="rec-title">{{ rec.title }}</text>
                <text class="rec-author">{{ rec.author }}</text>
              </view>
            </view>
            <view v-else-if="recommendationsLoading" class="loading">
              <text>加载推荐中...</text>
            </view>
            <view v-else class="empty-state">
              <text>暂无推荐</text>
            </view>
          </view>
        </view>
      </section>

      <!-- 底部操作栏 -->
      <section v-if="novel || novelLoading" class="bottom-actions">
        <view class="bottom-action" @click="handleAddToLibrary">
          <i class="bottom-icon fa-bookmark" :class="[isFavorited ? 'fas' : 'far']" />
          <text class="bottom-text">{{ isFavorited ? '已在书架' : '加入书架' }}</text>
        </view>
        <view class="bottom-action" @click="handleShare">
          <i class="fas fa-share bottom-icon" />
          <text class="bottom-text">分享</text>
        </view>
        <view class="read-btn" @click="handleStartReading">
          <i class="fas fa-book-open" />
          <text>{{ getReadingButtonText() }}</text>
        </view>
      </section>

      <!-- 评论弹窗 -->
      <view v-if="showCommentModal" class="comment-modal" @click="showCommentModal = false">
        <view class="modal-content" @click.stop>
          <view class="modal-header">
            <text class="modal-title">写评论</text>
            <view class="close-modal" @click="showCommentModal = false">
              <text class="i-carbon-close" style="font-size: 32rpx; color: var(--text-muted);" />
            </view>
          </view>

          <view class="rating-selector">
            <text class="rating-label">评分：</text>
            <view class="rating-stars-selector">
              <text
                v-for="i in 5"
                :key="i"
                class="star-selector" :class="[
                  i <= selectedRating
                    ? 'text-yellow-400'
                    : 'text-gray-400',
                ]"
                @click="selectedRating = i"
              >
                ★
              </text>
            </view>
          </view>

          <view class="comment-input-area">
            <textarea
              v-model="commentText"
              class="comment-textarea"
              placeholder="分享你的阅读感受..."
              maxlength="500"
            />
          </view>

          <view class="modal-actions">
            <view class="cancel-btn" @click="showCommentModal = false">
              <text>取消</text>
            </view>
            <view class="submit-btn" @click="handleCommentSubmit">
              <text>发表</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 章节列表弹窗 -->
      <view v-if="showChapterList" class="chapter-modal">
        <view class="chapters-modal-header">
          <text class="chapters-modal-title">目录</text>
          <view class="close-chapters" @click="showChapterList = false">
            <i class="fas fa-times" style="font-size: 32rpx; color: var(--text-muted);" />
          </view>
        </view>

        <view class="chapters-modal-content">
          <view v-if="chapters.length" class="chapters-modal-list">
            <view
              v-for="chapter in chapters"
              :key="chapter.id"
              class="chapter-item"
              @click="handleChapterSelect(chapter.id)"
            >
              <view class="chapter-info">
                <view class="chapter-status" :class="[{ unread: currentChapterId && chapter.id > currentChapterId }]" />
                <text class="chapter-title">{{ chapter.title }}</text>
              </view>
              <view class="chapter-meta">
                <text v-if="chapter.isVip" class="vip-badge">VIP</text>
                <text class="word-count">{{ chapter.wordCount }}字</text>
              </view>
            </view>
          </view>
          <view v-else-if="chaptersLoading" class="loading">
            <text>加载章节中...</text>
          </view>
          <view v-else class="empty-state">
            <text>暂无章节</text>
          </view>
        </view>
      </view>

      <!-- 书架选择器弹窗 -->
      <view v-if="showBookshelfSelector" class="bookshelf-selector-modal" @click="cancelBookshelfSelection">
        <view class="modal-content" @click.stop>
          <view class="modal-header">
            <text class="modal-title">选择书架</text>
            <view class="close-modal" @click="cancelBookshelfSelection">
              <text class="i-carbon-close" style="font-size: 32rpx; color: var(--text-muted);" />
            </view>
          </view>

          <view class="bookshelf-list">
            <view
              v-for="bookshelf in bookshelves"
              :key="bookshelf.id"
              class="bookshelf-item"
              :class="{ active: selectedBookshelfId === bookshelf.id }"
              @click="selectBookshelfForAdd(bookshelf.id)"
            >
              <view class="bookshelf-info">
                <text class="bookshelf-name">{{ bookshelf.name }}</text>
                <text class="bookshelf-count">{{ bookshelf.bookCount || 0 }}本小说</text>
              </view>
              <view v-if="selectedBookshelfId === bookshelf.id" class="selected-icon">
                <i class="fas fa-check" style="color: var(--primary-color);" />
              </view>
            </view>
          </view>

          <view class="modal-actions">
            <view class="create-bookshelf-btn" @click="createNewBookshelf">
              <i class="fas fa-plus" />
              <text>新建书架</text>
            </view>
            <view class="action-buttons">
              <view class="cancel-btn" @click="cancelBookshelfSelection">
                <text>取消</text>
              </view>
              <view class="confirm-btn" @click="confirmAddToBookshelf">
                <text>确认</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 创建书架弹窗 -->
      <view v-if="showCreateBookshelfModal" class="create-bookshelf-modal" @touchmove.prevent @click="cancelCreateBookshelf">
        <view class="modal-content" @click.stop @touchmove.stop>
          <view class="modal-header">
            <text class="modal-title">新建书架</text>
            <view class="close-modal" @click="cancelCreateBookshelf">
              <text class="i-carbon-close" style="font-size: 32rpx; color: var(--text-muted);" />
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">书架名称 *</text>
            <input
              v-model="newBookshelfName"
              type="text"
              class="form-input"
              placeholder="请输入书架名称"
              maxlength="20"
            >
          </view>

          <view class="form-group">
            <text class="form-label">书架描述</text>
            <textarea
              v-model="newBookshelfDescription"
              class="form-textarea"
              placeholder="请输入书架描述（可选）"
              maxlength="100"
            />
          </view>

          <view class="modal-actions">
            <view class="cancel-btn" @click="cancelCreateBookshelf">
              <text>取消</text>
            </view>
            <view class="confirm-btn" @click="confirmCreateBookshelf">
              <text>创建</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.novel-detail-page {
  min-height: 100vh;
  background: var(--background-dark);
}

.page-content {
  padding: 0;
  background: var(--background-dark);
  padding-bottom: 160rpx; /* 为底部操作栏留出空间 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 顶部导航栏 */
.detail-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  padding-top: var(--status-bar-height, 44px);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20rpx);
  transition: all 0.3s ease;
}

.header-transparent {
  background: transparent;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 88rpx;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.header-action {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-action:active {
  transform: scale(0.9);
  background: var(--primary-color);
}

.header-icon {
  font-size: 32rpx;
  color: white;
}

// 小说基本信息
.novel-hero {
  position: relative;
  padding: calc(var(--spacing-xl) + 88rpx + var(--status-bar-height, 44px)) var(--spacing-md) var(--spacing-xl);
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-size: cover;
  background-position: center;
}

.hero-content {
  position: relative;
  display: flex;
  gap: var(--spacing-lg);
  z-index: 2;
}

.novel-cover-main {
  width: 200rpx;
  height: 280rpx;
  border-radius: var(--border-radius-md);
  box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.novel-info-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.novel-info-content {
  display: flex;
  flex-direction: column;
}
.novel-title-main {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--spacing-sm);
  line-height: 1.3;
}

.novel-author-main {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--spacing-sm);
}

.novel-meta-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.meta-tag {
  padding: 8rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  color: white;
  backdrop-filter: blur(10rpx);
}

.novel-stats-main {
  display: flex;
  gap: var(--spacing-lg);
}

.stat-item-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: white;
}

.stat-label {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
}

/* 评分和进度 */
.rating-progress {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg) var(--spacing-md);
  background: var(--background-medium);
  margin: 0 var(--spacing-md) var(--spacing-md);
  border-radius: var(--border-radius);
}

.rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.rating-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.rating-score {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-color);
}

.rating-stars {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.star-icon {
  font-size: 28rpx;
}

.rating-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.progress-info {
  text-align: right;
}

.progress-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.progress-bar {
  width: 200rpx;
  height: 8rpx;
  background: var(--border-color);
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  transition: width 0.3s ease;
}

// 操作按钮区
.action-buttons {
  display: flex;
  gap: var(--spacing-md);
  margin: 0 var(--spacing-md) var(--spacing-lg);
}

.action-btn {
  flex: 1;
  padding: var(--spacing-md) 8rpx;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-secondary {
  background: var(--background-medium);
  color: var(--text-primary);
  border: 2rpx solid var(--border-color);
}

.btn-test {
  background: linear-gradient(135deg, var(--warning-color), #ff9800);
  color: white;
  border: 2rpx solid var(--warning-color);
}

.action-btn:active {
  transform: scale(0.95);
}

.action-icon {
  font-size: 32rpx;
}

// 标签页
.tabs-container {
  background: var(--background-dark);
  margin: 0 var(--spacing-md) var(--spacing-md);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.tabs-header {
  display: flex;
  background: var(--background-medium);
}

.tab-item {
  flex: 1;
  padding: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab-item.active {
  color: var(--primary-color);
  background: var(--background-dark);
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: var(--primary-color);
  border-radius: 2rpx;
}

.tabs-content {
  padding: var(--spacing-lg);
}

// 简介
.intro-content {
  line-height: 1.8;
}

.intro-text {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.tag {
  padding: 8rpx 16rpx;
  background: var(--background-medium);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--novel-primary);
}

// 章节列表
.chapters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.chapters-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.chapters-more {
  font-size: var(--font-size-sm);
  color: var(--novel-primary);
  cursor: pointer;
}

.chapters-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.chapter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--background-medium);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.chapter-item:active {
  transform: translateX(8rpx);
  background: var(--primary-color);
}

.chapter-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.chapter-status {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: var(--success-color);
}

.chapter-status.unread {
  background: var(--border-color);
}

.chapter-title {
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.chapter-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.vip-badge {
  padding: 4rpx 8rpx;
  background: var(--warning-color);
  border-radius: 4rpx;
  font-size: var(--font-size-xs);
  color: white;
}

.word-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

// 评论区
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.comments-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.write-comment {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--primary-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  color: white;
  cursor: pointer;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.comment-item {
  padding: var(--spacing-md);
  background: var(--background-medium);
  border-radius: var(--border-radius);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.comment-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.user-level {
  font-size: var(--font-size-xs);
  color: var(--novel-primary);
}

.comment-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.comment-time {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.comment-content {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-sm);
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.comment-like {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-like:active {
  transform: scale(0.9);
}

.comment-like.liked {
  color: var(--primary-color);
}

// 推荐区域
.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.rec-item {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.rec-item:active {
  transform: scale(0.95);
}

.rec-cover {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-sm);
}

.rec-title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-author {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

// 底部操作栏
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--spacing-md);
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20rpx);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.bottom-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  transition: all 0.3s ease;
}

.bottom-action:active {
  transform: scale(0.9);
}

.bottom-icon {
  font-size: 32rpx;
  color: var(--text-secondary);
}

.bottom-action.active .bottom-icon {
  color: var(--primary-color);
}

.bottom-text {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.read-btn {
  flex: 1;
  padding: var(--spacing-md);
  background: var(--gradient-primary);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.read-btn:active {
  transform: scale(0.95);
}

// 评论弹窗
.comment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 提高z-index确保在最顶层 */
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-content {
  width: 100%;
  max-height: 80vh;
  background: var(--background-dark);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  padding: var(--spacing-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.close-modal {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:active {
  background: var(--background-medium);
}

.rating-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.rating-label {
  font-size: var(--font-size-md);
  color: var(--text-primary);
}

.rating-stars-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.star-selector {
  font-size: 48rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-input-area {
  margin-bottom: var(--spacing-lg);
}

.comment-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: var(--spacing-md);
  background: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  line-height: 1.6;
  resize: none;
}

.comment-textarea::placeholder {
  color: var(--text-muted);
}

.modal-actions {
  display: flex;
  gap: var(--spacing-md);
}

.cancel-btn,
.submit-btn {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: var(--background-medium);
  color: var(--text-secondary);
}

.submit-btn {
  background: var(--gradient-primary);
  color: white;
}

.cancel-btn:active,
.submit-btn:active {
  transform: scale(0.95);
}

// 章节列表弹窗
.chapter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 提高z-index确保在最顶层 */
  background: var(--background-dark);
  display: flex;
  flex-direction: column;
}

.chapters-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--background-medium);
  border-bottom: 2rpx solid var(--border-color);
}

.chapters-modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.close-chapters {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-chapters:active {
  background: var(--background-dark);
}

.chapters-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.chapters-modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--text-muted);
}

// 加载容器
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  flex-direction: column;
  gap: var(--spacing-md);
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid var(--border-color);
  border-top: 4rpx solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.loading-subtitle {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

// 错误容器
.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

.error-text {
  color: var(--error-color);
  font-size: var(--font-size-md);
  text-align: center;
}

.retry-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--primary-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.retry-btn:active {
  transform: scale(0.95);
}

.retry-btn text {
  color: white;
  font-size: var(--font-size-md);
  font-weight: 600;
}

// 空状态
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--text-muted);
  font-size: var(--font-size-md);
  text-align: center;
}

// 书架选择器弹窗
.bookshelf-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 提高z-index确保在最顶层 */
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-content {
  width: 100%;
  max-height: 80vh;
  background: var(--background-dark);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  padding: var(--spacing-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2rpx solid var(--border-color);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.close-modal {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:active {
  background: var(--background-medium);
}

.bookshelf-list {
  max-height: 400rpx;
  overflow-y: auto;
  margin-bottom: var(--spacing-lg);
}

.bookshelf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: var(--background-medium);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

.bookshelf-item:active {
  transform: scale(0.98);
}

.bookshelf-item.active {
  background: var(--primary-color);
  color: white;
}

.bookshelf-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.bookshelf-name {
  font-size: var(--font-size-md);
  color: inherit;
  font-weight: 500;
}

.bookshelf-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.bookshelf-item.active .bookshelf-count {
  color: rgba(255, 255, 255, 0.8);
}

.selected-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.create-bookshelf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--background-medium);
  border: 2rpx dashed var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.create-bookshelf-btn:active {
  transform: scale(0.98);
  background: var(--background-light);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-md);
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: var(--background-medium);
  color: var(--text-secondary);
}

.confirm-btn {
  background: var(--gradient-primary);
  color: white;
}

.cancel-btn:active,
.confirm-btn:active {
  transform: scale(0.95);
}

// 创建书架弹窗
.create-bookshelf-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* 提高z-index确保在最顶层 */
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.create-bookshelf-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 var(--spacing-md);
  background: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--transition-normal);
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
  box-sizing: border-box;
  line-height: 1.4;
}

.form-input:focus {
  border-color: var(--primary-color);
  background: var(--background-light);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: var(--spacing-md);
  background: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  line-height: 1.6;
  resize: none;
  transition: all var(--transition-normal);
}

.form-textarea:focus {
  border-color: var(--primary-color);
  background: var(--background-light);
}

.form-textarea::placeholder {
  color: var(--text-muted);
}
</style>
